<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/bootstrap-table.min.css" />
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
    <div class="breadcrumb-wrapper row">
        <div class="col-12 col-lg-3 col-md-6">
            <h4 class="page-title">用户管理</h4>
        </div>
        <div class="col-12 col-lg-9 col-md-6">
            <ol class="breadcrumb float-right">
                <li class="active">用户管理</li>
                <li class="active"> / 用户管理</li>
            </ol>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-inline">
                        <div class="col-10">
                            <div class="form-group row">
                                <label>查找用户：</label>
                                <input type="text" class="form-control mb-2 mr-sm-2" id="findUsername" placeholder="账号"/>
                                <input type="text" class="form-control mb-2 mr-sm-2" id="findSchool" placeholder="学校"/>
                                <input type="text" class="form-control mb-2 mr-sm-2" id="findFaculty" placeholder="学院"/>
                                <input type="text" class="form-control mb-2 mr-sm-2" id="findClass" placeholder="班级"/>
                                <select class="form-control mb-2 mr-sm-2" style="height: 43px;" id="findUserRole"></select>
                                <input type="button" class="btn btn-success" id="findUser" value="查找">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <table id="table">

    </table>
</div>
<div class="modal fade" id="updateRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改权限</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body text-center">
                <input type="text" id="updateUserId" hidden>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">权限</label>
                    <div class="col-sm-9">
                        <select class="form-control form-control-lg" id="userRole"></select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="sureUpdate">确认</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="sealUsernameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">封号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <input type="text" id="sealUserId" hidden>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">封号至：</label>
                    <input type="text" id="sealTime"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="sureSeal">确认</button>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table.min.js"></script>
<script src="../assets/plugins/datatables/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
    //项目根路径
    var ctx = window.parent.ctx;
    var user = window.parent.user;
    var par = $("body");
    var pheight = $(window.parent.document).find(".main-content").height();

    $(function(){
        if(user.role>=1){
            $("#findUserRole").append("<option value='0'>学生</option>");
            $("#userRole").append("<option value='0'>学生</option>");
        }
        if(user.role>=2){
            $("#findUserRole").append("<option value='1'>老师</option>");
            $("#userRole").append("<option value='1'>老师</option>");
        }
        if(user.role>=3){
            $("#findUserRole").append("<option value='2'>管理员</option>");
            $("#userRole").append("<option value='2'>管理员</option>");
        }

        $('#sealTime').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-cn'
        });

        $.ajax({
            type: "post",
            url: ctx+"/user/findUserByEntity",
            xhrFields: {
                withCredentials: true
            },
            data: {role:user.role},
            success: function(data) {
                $("#table").bootstrapTable('load',data);
                // 父页面自适应子页面高度
                par.height(pheight);
            }
        });

        $("#findUser").click(function(){
            $.ajax({
                type: "post",
                url: ctx+"/user/findUserByEntity",
                xhrFields: {
                    withCredentials: true
                },
                data: {username:$("#findUsername").val(),school: $("#findSchool").val(),faculty:$("#findFaculty").val(),userClass:$("#findClass").val(),role:parseInt($("#findUserRole").val())+1},
                success: function(data){
                    $("#table").bootstrapTable('load',data);
                    // 父页面自适应子页面高度
                    par.height(pheight);
                }
            });
        });

        $("#sureUpdate").click(function () {
            $.ajax({
                type: 'post',
                url: ctx + '/user/update',
                xhrFields:{
                    withCredentials: true
                },
                data: {id: $("#updateUserId").val(),role:$("#userRole").val()},
                success: function (data) {
                    alert(data);
                    window.location.reload();
                }
            })
        });

        $("#sureSeal").click(function () {
            $.ajax({
                type: 'post',
                url: ctx + '/user/update',
                xhrFields:{
                    withCredentials: true
                },
                data: {id: $("#updateUserId").val(),role:$("#userRole").val(),sealTime:$("#sealTime").val()},
                success: function (data) {
                    alert(data);
                    window.location.reload();
                }
            })
        });

        $("#table").bootstrapTable({
            pagination: true,
            pageSize: 8,
            pageNumber: 1,
            smartDisplay: true,
            columns: [{
                field: '',
                title: '序号',
                formatter: function(value,row,index){
                    return index+1;
                }
            },
            {
                field: 'username',
                title: '账号'
            },
            {
                field: 'nickname',
                title: '昵称'
            },
            {
                field: 'sex',
                title: '性别'
            },
            {
                field: 'school',
                title: '学校'
            },
            {
                field: 'faculty',
                title: '学院'
            },
            {
                field: 'userClass',
                title: '班级'
            },
            {
                field: 'role',
                title: '权限',
                formatter: function (value, row) {
                    if(value===0){
                        return "学生";
                    }else if(value===1){
                        return "老师";
                    }else if(value===2){
                        return "管理员";
                    }
                }
            },
            {
                field: 'operate',
                title: '操作',
                events: {
                    'click #updateRole': function (e, value, row) {
                        $("#updateUserId").val(row.id);
                        $("#updateRoleModal").modal('show');
                    },
                    'click #sealUsername': function (e, value, row) {
                          $("#sealUserId").val(row.id);
                          $("#sealUsernameModal").modal('show');
                    }
                },
                formatter: function(value, row, index){
                    var buttonStr = "<button id='updateRole' type='button' class='btn btn-success'>修改权限</button> "+
                        "<button id='sealUsername' type='button' class='btn btn-danger'>封号</button>"
                    return buttonStr;
                }
            }],
            onPostBody: function () {
                $(".page-list").remove();
            }
        })
    })

</script>
</body>
</html>